<template>
  <fieldset>
    <legend>二级联动</legend>
    省:{{sel1}}
    <select v-model="sel1" @change="provienceChange(sel1)">
      <option v-for="item in provience" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    市:
    <select v-model="sel2" @change="xianChange(sel2)">
      <option v-for="item in citys" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    县:
    <select v-model="sel3">
      <option v-for="item in xian" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
  </fieldset>
</template>
<script>
import * as api from "@/api/select";
export default {
  data(){
    return{
      //省的数据
      provience:[],
      //市的数据
      citys:[],
      //县的数据
      xian:[],
      sel1:1,
      sel2:'',
      sel3:''
    }
  },
  mounted() {
    api.fetchData()
      .then((res) => {
      // console.log(res);
      //获取了所有省的数据
      this.provience = res
      //获取默认第一条的
      let pid = res[0].id
      this.provienceChange(pid)
    });
  },
  methods:{
    provienceChange(pid){
       //选择的省变化的时候，获取选择的省对应的id，发起请求，请求市的数据
       api.fetchCity(pid)
         .then(res=>{
          // console.log(res)
          this.citys = res
          //默认选中

         if(res.length>0){
          this.sel2 = res[0].id
          this.xianChange(this.sel2)
         }
         })
    },
    xianChange(xianId){
      console.log(xianId);
         api.fetchxian(xianId)
         .then(res=>{
          // console.log(res)
          this.xian = res
          //默认选中

         if(res.length>0){
          this.sel3 = res[0].id
         }
         })
    }
  }
};
</script>
<style scoped>
select {
  width: 100px;
}
</style>
